<template>
  <div id="swiper">
    <!-- 第一个轮播 -->
    <div class="pic" ref="pic" >
      <a :href="toStore" class="relative">
        <img 
          :src="item.src" 
          REFERRER="NO-REFERRER" 
          class="currSwiper swiper-item"
          v-for="(item,index) in swiperArr" 
          :key="item"
          :class="currIndex == index ? 'currSwiper': 'no-curr'"
        />
      </a>
    </div>
    <!-- 第二列轮播 -->
    <div class="swiper-cake w-full relative">
      <div class="s-swiper w-full absolute ">
        <van-swipe class="my-swipe" :autoplay="3500000" indicator-color="white" ref="myCarousel" lazy-render>
          <van-swipe-item v-for="(item, index) in secondSwiper" :key="index">
            <div class="cake-info flex flex-col justify-center relative">
              <div class="p p-left absolute" :class="index == 2 ? 'last-cake':''" @click="switchSwiper('prev')"></div>
              <div class="p p-right absolute" :class="index == 2 ? 'last-cake':''" @click="switchSwiper('next')"></div>
              <a :href="item.target" class="w-full h-full">
                <img :src="item.src"  class="w-full cake h-full" />
                <div class="burden-m">
                  <h3>{{ item.title }}</h3>
                  <p>{{ item.from }}</p>
                </div>
              </a>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>  
      <div class="gray-box relative "> 
        <a href="javascript:void(0)" class="absolute" @click="getMoreCakes">查看更多</a>
      </div>
    </div> 
  </div>
</template>

<script lang="ts">
import {fw_1, fw_2, fw_3, sw_1, sw_2, sw_3} from '@/const'
import { useRouter } from 'vue-router'
export default {
  setup() {
    const router = useRouter()
    var currIndex = ref(0)
    const toStore = ref('https://j.youzan.com/4-z5P7')
    const myCarousel = ref(null) 
    const swiperArr = ref([
      // { src: fw_1, target: 'https://j.youzan.com/4-z5P7'},
      // { src: fw_2, target: 'https://j.youzan.com/h-E_P7'},
      { src: fw_3, target: 'https://j.youzan.com/4-z5P7'},
      ])
    const switchSwiper = (type) => {
      myCarousel.value.resize()
      type == 'prev' ? myCarousel.value.prev() : myCarousel.value.next()
    }
     const getMoreCakes = () => {
      router.push({
        path: '/cakes',
      })
      document.documentElement.scrollTop = 0
    }
    const secondSwiper = ref([
      {
        src: sw_1,
        target: 'https://j.youzan.com/4YEFmj',
        title: '四大美人-动物奶油蛋糕',
        from :'-爆款推荐-'
      },
      {
        src: sw_2,
        target: 'https://j.youzan.com/Ia8Fmj',
        title: '榴莲千层-动物奶油蛋糕',
        from :'-爆款推荐-'
      },
      {
        src: sw_3,
        target: 'https://j.youzan.com/24bFmj',
        title: '生椰蛋糕-动物奶油蛋糕',
        from :'-爆款推荐-'
      },
    ])
    onMounted(()=> {
      myCarousel.value.resize()
      // setTimer()
    })

    let timer = null
    const setTimer = () => {
      timer = setInterval(() => {
        currIndex.value == 2 ? currIndex.value = 0 :  currIndex.value ++ 
        toStore.value = swiperArr.value[currIndex.value].target
      }, 4000);
    }

    onUnmounted(() => {
      console.log(1)
      if (timer) {
        clearInterval(timer)
        timer = null
      }
    })
    return {
      swiperArr,currIndex,toStore,
      secondSwiper, myCarousel,switchSwiper,getMoreCakes
    }
  },
}
</script>

<style lang="scss">
#swiper {
  width: 375px;
  height: 556px;
  .pic {
    width: 100%;
    // height: 200px;
    padding: 8px 0;
    background-color: #d21019;
    a {
      // display: inline-block;
      // width: 100%;
      // height: 100%;
      img {
        bottom: 0;
        left: 0;
        width: 100%;
        // height: 100%;
      }
    }
  }
  .currSwiper {
    animation: swiper 1s linear forwards;
    @keyframes swiper {
      0% { opacity: 0; z-index: -1 }
      100% { opacity: 1; z-index: 99 }
    }
  }
  .no-curr {
    animation: noSwiper 0.8s linear forwards;
    @keyframes noSwiper {
      0% { opacity: 1; z-index: 99 }
      100% { opacity: 0; z-index: -1 }
    }
  }
  .swiper-cake {
    height: 356px;
    padding-top: 170px;
    .s-swiper {
      top: 32px;
      height: 292px;
      z-index: 99;
      .my-swipe {
        width: 100% !important;
        height: 100% !important;
      }
      .cake-info {
        .p {
          width: 34px;
          height: 66px;
          z-index: 199;
          top: 50%;
          transform: translateY(-25%);
          background-size: contain;
        }
        .p-left {
          left: 18px;
          background: url('/imgs/index/arrow-left.png') no-repeat;
        }
        .p-right {
          right: 18px;
          background: url('/imgs/index/arrow-right.png') no-repeat;
        }
        .last-cake {
          transform: translateY(-30%);
          // width: 178px;
          // height: 173px;
        }
        .burden-m {
          margin-top: -10px;
        }
         h3 {
          font: 400 16px 'PingFang SC';
        }
        p {
          font: 400 12px 'PingFang SC';
          color: #4C4C4C;
          margin-top: 5px ;
        }
      }
    }
    .gray-box {
      height: calc(356px - 170px);
      background-color: #f6f6f6;
      a {
        left: 153px;
        bottom: 32px;
        width: 66.64px;
        height: 32px;
        line-height: 32px !important;
        font: 400 10px  'PingFang SC';
        margin: 0 auto;
        background: url('/imgs/index/moreCake-bg.png') no-repeat;
        background-size: contain;
        text-align: center;
        color: #D61718;
        z-index: 99*9;
      }
    }
  }
}
</style>
